<template>
  <CollapseContainer v-bind="$attrs" title="项目类型分布">
    <div ref="pieChart" style="width: 100%; height: 210px"></div>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '/@/components/Container/index';

  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';

  // 创建一个ref引用，绑定到div容器
  const pieChart = ref<any>(null);

  // 使用onMounted来初始化ECharts
  onMounted(() => {
    setTimeout(() => {
      if (pieChart.value) {
        // 初始化ECharts实例
        const chart = echarts.init(pieChart.value);

        // 饼图的配置项
        const option = {
          // title: {
          //   text: '部门分布',
          //   left: 'center',
          //   top: 'center',
          //   textStyle: {
          //     fontSize: 18,
          //   },
          // },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {d}%', // 显示项目名称和百分比
          },
          legend: {
            orient: 'horizontal',
            bottom: '0%', // 将图例距离底部的位置设置为10%
            left: 'center',
          },
          series: [
            {
              name: '部门',
              type: 'pie',
              radius: ['40%', '70%'], // 设置环形图的内外半径，形成环形
              center: ['50%', '40%'], // 设置圆心位置
              data: [
                { value: 8, name: '产品研发' },
                { value: 4, name: '产品设计' },
                { value: 5, name: '售后运维' },
                { value: 2, name: '生产制造' },
              ],
              label: {
                show: true,
                formatter: '{d}%', // 显示百分比
              },
              labelLine: {
                show: true,
                length: 10, // 设置指示线的长度
                length2: 15, // 设置指示线的第二段长度
              },
              itemStyle: {
                borderRadius: 10, // 设置圆角效果
                borderColor: '#fff', // 设置分隔线的颜色
                borderWidth: 2, // 设置分隔线宽度
              },
            },
          ],
        };

        // 设置配置项并渲染图表
        chart.setOption(option);

        // 监听窗口大小变化，调整图表大小
        window.addEventListener('resize', () => {
          chart.resize();
        });
      }
    }, 2000);
  });
</script>
